/**
 * 
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2021-07-28 12:48:28
 * @version v2.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试！
// ...

/**
 * 添加代办事项
 */
const input = document.querySelector('form')
const title = document.querySelector('#title')
const todocount = document.querySelector('#todocount')
const todolist = document.querySelector('#todolist')
const jx = document.querySelector('h2')


// 添加todo
add()
function add (){
    input.addEventListener('submit', e => {
        e = e || window.event
        // 阻止默认行为
        try { e.preventDefault() } catch(err) { e.returnValue = false }
        const res =  title.value.trim()
        console.log(res);
        title.value = null
        
        const li = document.querySelectorAll('#todolist>li')
        let length = li.length + 1
        
        console.log(length);
        let str = ''
        str += `
                <li>
                    <input type="checkbox" />
                    <p onclick="edit(${length})">${res}</p>
                    <a href="javascript:remove(${length})">-</a>
                </li>
        `
        todolist.innerHTML += str
        let atr = ''
        atr = `<h2>正在进行 <span id="todocount">${length}</span></h2>`
        jx.innerHTML = atr
    
    
    })
}





// 移除todo
const li = document.querySelectorAll('#todolist>li')
const donelist = document.querySelector('#donelist')
li.forEach(function (item) {
    item.addEventListener('click' , e => {
        e = e || window.event
        const target = e.target || e.srcElement
    
        console.log(target.checked);
        if(target.checked){
            const a = item.innerText
            // todolist.removeChild(target.parentNode)
            let btr = ''
            btr += `
                        <li>
                            <input type="checkbox" checked="checked" />
                            <p onclick="edit(5)">${a}</p>
                            <a href="javascript:remove(5)">-</a>
                        </li>
                    `
            donelist.innerHTML += btr    
         
        }
        if(target.nodeName === 'A'){
            todolist.removeChild(target.parentNode)
            // const li = document.querySelectorAll('#todolist>li')
            let length = li.length - 1
            let atr = ''
            atr = `<h2>正在进行 <span id="todocount">${length}</span></h2>`
            jx.innerHTML = atr
        }
        if(target.nodeName === 'P'){
            // target.innerText
            
        }
    })
})
const donelists = document.querySelectorAll('#donelist>li')
donelists.forEach(function (item) {
    item.addEventListener('click', e => {
        e = e || window.event
            const target = e.target || e.srcElement
    
        if(!target.checked){
            const b = (target.parentNode).innerText
            console.log(b);
            const li = document.querySelectorAll('#todolist>li')
            let length = li.length + 1
            
            console.log(length);
            let str = ''
            str += `
                    <li>
                        <input type="checkbox" />
                        <p onclick="edit(${length})">${b}</p>
                        <a href="javascript:remove(${length})">-</a>
                    </li>
            `
            todolist.innerHTML += str
            let atr = ''
            atr = `<h2>正在进行 <span id="todocount">${length}</span></h2>`
            jx.innerHTML = atr
        }
    
        if(target.nodeName === 'A'){
            console.log(target);
            donelist.removeChild(target.parentNode)
        }
    
    })
})








// function add(){
//     console.log("add method");


// }


/**
 * 编辑代办事项
 */
function edit(){
    console.log("edit method");
}

/**
 * 移除代办事项
 */
function remove(){
    console.log("remove method");
}

/**
 * 跨域解决方案代码/配置粘贴处（请粘贴在块状注释范围内）

 */